<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>overflow 属性示例</title>
</head>
<body>
  <!-- <style>
    body {
      display: flex;
      justify-content: space-around;
    }
    
    div {
      margin: 1em;
      font-size: 1.2em;
    }
    
    p {
      width: 10em;
      height: 5em;
      border: 1px solid burlywood;
    }
    
    p.visible {
      overflow: visible;
    }
    
    p.hidden {
      overflow: hidden;
    }

    p.clip {
      overflow: clip;
    }
    
    p.scroll {
      overflow: scroll;
    }
    
    p.auto {
      overflow: auto;
    }
    </style>
    <div>
      <code>visible</code>
      <p class="visible">
        <b> WeiyiGeek 作者</b> ：记录全栈工程师学习之路修炼心得，分享工作实践、网络安全、运维、编程、大数据、云原生、物联网、人工智能以及书籍笔记、人生职场感悟等相关高质量文章。 花开堪折直须折，莫待无花空折枝。 Blog:【<a href="https://weiyigeek.top" name="全栈工程师修炼指南博客">https://weiyigeek.top】</a>
      </p>
    </div>
    
    <div>
      <code>hidden</code>
      <p class="hidden">
        <b> WeiyiGeek 作者</b> ：记录全栈工程师学习之路修炼心得，分享工作实践、网络安全、运维、编程、大数据、云原生、物联网、人工智能以及书籍笔记、人生职场感悟等相关高质量文章。 花开堪折直须折，莫待无花空折枝。 Blog:【<a href="https://weiyigeek.top" name="全栈工程师修炼指南博客">https://weiyigeek.top】</a>
      </p>
    </div>

    <div>
      <code>clip</code>
      <p class="clip">
        <b> WeiyiGeek 作者</b> ：记录全栈工程师学习之路修炼心得，分享工作实践、网络安全、运维、编程、大数据、云原生、物联网、人工智能以及书籍笔记、人生职场感悟等相关高质量文章。 花开堪折直须折，莫待无花空折枝。 Blog:【<a href="https://weiyigeek.top" name="全栈工程师修炼指南博客">https://weiyigeek.top】</a>
      </p>
    </div>


    <div>
      <code>scroll</code>
      <p class="scroll">
        <b> WeiyiGeek 作者</b> ：记录全栈工程师学习之路修炼心得，分享工作实践、网络安全、运维、编程、大数据、云原生、物联网、人工智能以及书籍笔记、人生职场感悟等相关高质量文章。 花开堪折直须折，莫待无花空折枝。 Blog:【<a href="https://weiyigeek.top" name="全栈工程师修炼指南博客">https://weiyigeek.top】</a>
      </p>
    </div>
    
    <div>
      <code>auto</code>
      <p class="auto">
        <b> WeiyiGeek 作者</b> ：记录全栈工程师学习之路修炼心得，分享工作实践、网络安全、运维、编程、大数据、云原生、物联网、人工智能以及书籍笔记、人生职场感悟等相关高质量文章。 花开堪折直须折，莫待无花空折枝。 Blog:【<a href="https://weiyigeek.top" name="全栈工程师修炼指南博客">https://weiyigeek.top】</a>
      </p>
    </div> -->

    <hr>
    <p>示例2</p>
    <style>
      body {
        width: 90%;
        max-width: 900px;
        margin: 0 auto;
        font:
          0.9em/1.2 Arial,
          Helvetica,
          sans-serif;
      }
      
      .wrapper {
        background-color: rgb(79, 185, 227);
        padding: 10px;
        color: #fff;
        overflow: auto;
      }
      
      .box {
        float: left;
        margin: 15px;
        width: 150px;
        height: 150px;
        border-radius: 5px;
        background-color: rgb(207, 232, 220);
        padding: 1em;
      }
      </style>
      <h1>Simple float example</h1>
      <div class="wrapper">
        <div class="box">Float</div>
        <b> WeiyiGeek 作者</b> ：记录全栈工程师学习之路修炼心得，分享工作实践、网络安全、运维、编程、大数据、云原生、物联网、人工智能以及书籍笔记、人生职场感悟等相关高质量文章。 花开堪折直须折，莫待无花空折枝。 Blog:【<a href="https://weiyigeek.top" name="全栈工程师修炼指南博客">https://weiyigeek.top】</a>
      </div>
      <p class="cleared">
        本人现从事系统网络安全运维等工作, 毕业实习前做过等保安全服务等相关工作，从上面兴趣爱好可以看出, 我是一名计算机技术、信息安全爱好者以及物联网技术开发相关。对于计算机相关的技术以及网络安全技术知识有着浓厚的学习兴趣，喜欢认识、结交各位大佬进行网络安全攻防和漏洞挖掘等相关疑惑的讨论学习，想做一名正义的白帽子维护网络安全。
      </p>
</body>
</html>